<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />
<link rel="stylesheet" href="../../../js/layui/css/layui.css" />
<script src="../../../js/layui/layui.js"></script>
<script src="../../../js/vue/axios.min.js"></script>
<script src="../../../js/vue/vue.js"></script>

<style>
.container {
	margin-top: 80px;
	margin-left: 90px;
}

input {
	margin: 10px;
}

.layui-btn {
	margin-left: 110px;
}

.layui-form-item {
	margin-top: 50px;
}
</style>
</head>
<body>

	<div id="app" class="layui-form">
		<div class="container">
			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px;">分类名称：</label>
				<div class="layui-input-inline">
					<input type="text" v-model="category_name" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px;">分类图标：</label>
				<div class="layui-upload-drag" id="imgs">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div class="layui-hide" id="uploadDemoView">
						<hr>
						<img src="" alt="上传成功后渲染" style="max-width: 196px">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<button class="layui-btn" @click="edit">提交</button>
				<button type="button" class="layui-btn layui-btn-primary" id="close">关闭</button>
			</div>

		</div>
	</div>
	<script>
		//截取编辑id
		
		var href=location.href;
		var index=href.indexOf("=");
		var category_id=href.substr(index+1,href.length);
	
	layui.use('upload', function(){
		  var $ = layui.jquery
		  ,upload = layui.upload;
	//文件上传
	//拖拽上传
	  upload.render({
	    elem: '#imgs'
	    ,url: '/ssb/category/upload' //改成您自己的上传接口
	    ,done: function(res){
	      layer.msg('添加成功');
	       layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data); 
	    }
	  });
	
	});
	
	
	
	new Vue({
		el:'#app',
		data:{
			category_name:""
		},
		mounted:function(){
			this.show()
		}
		,
		methods:{
			//数据回显
			show:function(){
				axios.get('/ssb/category/findById?category_id='+category_id).then(res=>{
					console.log(res.data);
					this.category_name=res.data.category_name;
					img(res.data.category_icon);
				},err=>{
					console.log(err);
				});
			},
			//编辑操作
			edit:function(){
				if(this.category_name!=null && this.category_name!=''&&this.category_name.indexOf(" ")==-1){
				var params = new URLSearchParams();
				params.append('category_name', this.category_name);
				params.append('category_id', category_id);
				axios.post('/ssb/category/edit',params).then(res=>{
					console.log(res.data);
					if(res.data.row>0){
						succeed(res.data.message)
					}
				},err=>{
					console.log(err);
				});
				}else{
					alert("必填项不能为空（包括空格）！");
				}
			}
		}
	});
	//回显操作
	function img(href){
		layui.use(['upload','jquery','layer'], function(){
			  var $ = layui.jquery
			  ,upload = layui.upload;
		 	 layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', href); 
		});
	}
	//操作成功方法
	function succeed(message) {
		layui.use(['form', 'jquery'], function() {
			layer.alert(message+"成功！", function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
			});
		});
	}
	
	//关闭方法
	layui.use(['form', 'jquery'], function() {
		var $=layui.jquery
	  $("#close").on('click',function(){
		layui.use(['form', 'jquery'], function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
		});
	});
	
	});
	
	</script>
</body>
</html>
